<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8"/>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<div class="layui-form" style="margin: 15px;">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名：</label>
        <div class="layui-input-inline">
            <input id="loginName" name="loginName" class="layui-input" lay-verify="required" autocomplete="off"
                   type="text" placeholder="推荐使用手机号"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名：</label>
        <div class="layui-input-inline">
            <input id="name" name="userName" class="layui-input" lay-verify="required" autocomplete="off" type="text"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-inline">
            <input id="password" name="password" class="layui-input" lay-verify="required" autocomplete="off"
                   type="password"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机：</label>
        <div class="layui-input-inline">
            <input id="phone" name="phone" class="layui-input" lay-verify="required" autocomplete="off" type="text"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">分配角色：</label>
        <div class="layui-input-inline">
            <select name="roleId" id="roleId" lay-verify="">
                <option value="">请选择角色</option>
                <option th:each="org,userStat:${roles}"
                        th:value="${org.id}"
                        th:text="${org.roleName}">

                </option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <div class="layui-input-inline">
            <input type="button" lay-submit id="submit-btn" lay-filter="submit-btn">保存</input>
            <input type="button" cus-event="cancel_btn">取消</input>
        </div>
    </div>
</div>
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:src="@{/static/bm/js/common.js}"></script>
<script>
    layui.config({
        base: contextPath + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'util'], function () {
        var $ = layui.$
            , form = layui.form
            , util = layui.util;

        form.render();

        form.on('submit(submit-btn)', function (data) {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            layer.confirm('确认提交吗？', function () {
                var loading = layer.load();
                $.post(contextPath + '/sys/user/add', data.field, function (ev) {
                    layer.close(loading);
                    if (ev.code === '0000') {
                        layer.msg(ev.msg, {
                            icon: 6, shade: 0.3, time: 1000,
                            end: function () {
                                parent.layui.table.reload('item-list'); //重载表格
                                parent.layer.close(index); //再执行关闭
                            }
                        });
                    } else {
                        layer.msg(ev.msg);
                    }
                }, 'json');

            });
        });

        //按钮事件
        util.event('cus_event', {
            cancel_btn: function (data) {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        });

    });
</script>
</body>
</html>
